<template>
  <m-page>
    <!-- 心意通首页 -->
    <m-header title="心意通首页"></m-header>
    <!-- 心意通卡首页 -->
    <!-- 如果没有办理心意通卡则显示宣传页 -->
    <!-- 有1张则直接进入心意通卡信息主页 -->
    <!-- 有2张或以上显示卡列表页 -->
    <div class="publicity_page" v-if="this.hasCard == '0'">
      <p>长沙银行心意通卡</p>
      <p class="quota">最高额度400万元</p>
      <div class="apply_require">
        <div></div>
        <p>开卡条件</p>
      </div>
      <p class="text">具体的申请开卡条件和用途，具体的申请开卡条件和用途具体的申请开卡条件和用途</p>
      <div class="message">
        <p class="msg1">您还没有心意通卡？</p>
        <p class="msg2">马上去长沙银行营业网点咨询办理吧！</p>
        <p class="msg3">服务热线：40067-96511</p>
      </div>
    </div>
    <!-- 卡列表页 -->
    <div class="card_list">
      <div
        class="card_list_item"
        v-for="item in cardlist"
        :key="item.id"
        @click="gotoCardInfo(item.isActived)"
      >
        <ynet-cell-item :title="item.cardname" :brief="item.account">
          <span class="holder" slot="left"></span>
          <p class="card_item_right" slot="right" v-if="item.isActived == '0'">未激活</p>
        </ynet-cell-item>
        <div class="card_quota">
          <p>
            总额度：
            <span>{{item.total_quota}}</span>万元
          </p>
          <p>
            可用额度：
            <span class="available_quota">{{item.available_quota}}</span>万元
          </p>
        </div>
      </div>
    </div>
  </m-page>
</template>

<script>
import { CellItem } from "ynet-mobile";
import { goto } from "../utils/index";
export default {
  components: {
    [CellItem.name]: CellItem
  },
  data() {
    return {
      hasCard: "2", // 已有心意通卡数量
      cardlist: [
        //卡列表信息
        {
          id: 1,
          isActived: "1", //是否激活  1 已激活
          cardname: "长沙银行融易通卡",
          account: "6223 **** **** 9876",
          available_quota: 200, //可用额度
          total_quota: 200 //总额度
        },
        {
          id: 2,
          isActived: "0", //是否激活  0 未激活
          cardname: "长沙银行融易通卡",
          account: "3113 **** **** 9876",
          available_quota: 70, //可用额度
          total_quota: 200 //总额度
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    //点击卡列表
    // 当卡未激活时，进入卡激活页
    // 当卡已激活时，进入卡信息页
    gotoCardInfo(isActived) {
      if (isActived === "0") {
        goto("home_pages/card_activate.html");
      } else if (isActived === "1") {
        goto("home_pages/card_information.html");
      }
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

